<template>
  <div :class="' swiper market-swiper swipers'+swipers.length">
    <el-carousel :interval="5000" arrow="never" height="500px">
      <!-- <el-carousel-item class="market-swiper-item cursor"

       v-if="i.resourceUrl" v-for="i in swipers"
       :style="'background-image:url('+URL.PIC+i.resourceUrl+')'"
      @click.native="routeToPath(i.target.params?i.target.params.name:'', 'new')"
       ></el-carousel-item> -->

      <el-carousel-item class="market-swiper-item cursor" v-for="(item,index) in swipers"
      :style="'background-image:url('+URL.PIC+item.resourceUrl+')'"  @click.native="routeToOut(item.target.params?item.target.params.name:'', 'new')"
       >

       </el-carousel-item>
    </el-carousel>
<!--    <div class="swiper-bg">-->
<!--      <img src="../../../assets/images/market/search-classify.png"/>-->
<!--    </div>-->

    <div class="classify-pop">
      <div class="classify-header">
        <h5>专业批发市场</h5>
        <p>足不出户，在家也能逛市场</p>
      </div>
      <div class="market-info">
        <h5 class="market-title">市场信息</h5>
        <div class="market-msgUl">
          <div class="market-msg-list">
            <i>.</i>
            <span class="marketMsg-left">联系电话：</span>
            <span class="marketMsg-right">{{market.telphone}}</span>
          </div>
          <div class="market-msg-list">
            <i>.</i>
            <span class="marketMsg-left">营业时间：</span>
            <span class="marketMsg-right">{{market.officeTime}}</span>
          </div>
          <div class="market-msg-list">
            <i>.</i>
            <span class="marketMsg-left">云工厂数：</span>
            <span class="marketMsg-right">{{factoryCount}}</span>
          </div>
          <div class="market-msg-list">
            <i>.</i>
            <span class="marketMsg-left">停车费用：</span>
            <span class="marketMsg-right">{{market.parkCost}}</span>
          </div>
          <div class="market-msg-list">
            <i>.</i>
            <span class="marketMsg-left">市场地址：</span>
            <span class="marketMsg-right" :title="market.address">{{market.address}}</span>
          </div>
        </div>
        <img src="@/assets/images/market/pop-line.png"/>
        <h5 class="market-title">动态信息</h5>
        <div class="scroll-msg-item">
          <div class="scroll-msg-ul">
            <div class="scroll-left-ico fl">
              <div class="scroll-circle"></div>
              <div class="scroll-line"></div>
              <div class="scroll-circle"></div>
              <div class="scroll-line"></div>
              <div class="scroll-circle"></div>
              <div class="scroll-line"></div>
              <div class="scroll-circle"></div>
            </div>
            <div class="scroll-right-info fl">
              <div :class="animate?'anim info-scroll-ul':'info-scroll-ul'" id="scrollUl" ref="scrollUl">
                <div class=" info-detail cursor " v-for="item in items">
                  <span class="info-belongs">[{{ item.style }}]</span> {{ item.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getMarketVirtual ,getMarketDetail,bannerList,getMarketPcTrade,factoryCount} from '@/api/market'
import indexClassifyImg from '@/jsons/index-classify-img'
export default {
  props: ['marketId'],
  data() {
    return {
      swipers: [],
      classIdx: [],
      classifyIndex: 0,
      indexClassifyImg: indexClassifyImg,
      animate: false,
      list:[],
      items:[],
      factoryCount:0,
      market:{
        address: '',
        area: '',
        city: '',
        introduction: '',
        latitude: '',
        locationAddress: '',
        longitude: '',
        mapImg: '',
        marketId: '',
        marketImages: '',
        marketName:'',
        marketStatus: 0,
        marketsTags:'',
        officeTime: '',
        parkCost: '',
        province: '',
        shortName: '',
        telphone: '',
      },
    }
  },
  created() {
    this.getPicList();
    this.getMarketDetail();
    this.getMarketVirtual();
    this.count();
    setInterval(this.scroll,1000)
  },
  methods: {
      //市场云工厂数量
      count(){
          factoryCount({marketId:this.marketId}).then(res=>{
              this.factoryCount = res.data;
          });
      },
    scroll(){
      this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
        this.items.shift();               //删除数组的第一个元素
        this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      },500)
    },
    //市场动态
    getMarketVirtual(){
      this.items = [];
      getMarketVirtual({marketId:this.marketId}).then(res=>{
          this.list = res.data;
          if(this.list.dynamicList.length>4){
            this.animate = true;
          }
          this.list.dynamicList.forEach(item=>{
             let type = "";
             if(item.dynamicType == 1){
                 type = "入驻";
             }else if(item.dynamicType == 2){
                 type = "商品";
             }else if(item.dynamicType == 3){
                 type = "交易";
             }
             this.items.push({style:type,content:item.content});
          });
      });
    },
    // 市场详情
    getMarketDetail(){
      this.classifys = [];
      getMarketDetail({marketId:this.marketId}).then(res=>{
          this.market = res.data;
      });
    },
    // 鼠标移入分类
    classifyOver(item, classifyIndex) {
      this.showClassify = true;
      this.classifyIndex = classifyIndex
      if(item !== 'no'){
        this.classIdx=[item];
      }
    },
    classifyLeftOut() {
      // this.classifyIndex = -1
    },
    // 鼠标移出分类
    classifyOut(item, classifyIndex) {
      this.showClassify = false;
      this.classifyIndex = classifyIndex
      if(item !== 'no'){
        this.classIdx=[item];
      }
    },
    getPicList() {
      bannerList({
        positionCode: 'markets_banner',
        device: 'pc',
        marketId:this.marketId
      }).then(res=>{
        this.swipers = res.data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper{
    position: relative;
    overflow: hidden;
    min-width: 1200px;
    .swiper-bg{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      img{
        vertical-align: bottom;
      }
    }
    .classify-pop{
      width: 240px;
      height: 476px;
      background: #fff;
      border-radius: 10px;
      position: absolute;
      top: 12px;
      right: 50%;
      margin-right: -600px;
      z-index: 11;
      .classify-header{
        width: 240px;
        height: 90px;
        background: url('../../../assets/images/market/pop-headerBg.png') no-repeat;
        overflow: hidden;
        text-align: center;
        color: #fff;
        h5{
          font-size: 18px;
          margin: 25px auto 10px;
        }
        p{
          color: #D6ECFF;
          font-size: 12px;
        }
      }
      .market-info{

        .market-title{
          color: #333;
          font-size: 14px;
          width: 65px;
          font-weight: 500;
          margin: 15px auto 10px;
          position: relative;
          text-align: center;
        }
        .market-title::before{
          display: block;
          content: '';
          width: 25px;
          height: 1px;
          background: #333;
          position: absolute;
          left: -30px;
          top: 8px;
        }
        .market-title::after{
          display: block;
          content: '';
          width: 25px;
          height: 1px;
          background: #333;
          position: absolute;
          right: -30px;
          top: 8px;
        }
        .market-msgUl{
          .market-msg-list{
            height: 25px;
            line-height: 25px;
            font-size: 12px;
            i{
              display: inline-block;
              font-size: 30px;
              width: 10px;
              font-style: normal;
              color: #255B8B;
              float: left;
              margin-top: -9px;
              margin-left: 8px;
            }
            .marketMsg-left{
              float: left;
              color: #888;
            }
            .marketMsg-right{
              float: left;
              color: #333;
              max-width: 155px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .scroll-msg-item{
          margin-top: 22px;
          .scroll-msg-ul{
            overflow: hidden;
            zoom: 1;

            .scroll-left-ico{
              margin: 0 10px;
              .scroll-circle{
                width:9px;
                height:9px;
                background:rgba(247,247,247,1);
                border:2px solid rgba(37,91,139,1);
                border-radius:50%;
              }
              .scroll-line{
                background: #c4d3df;
                width: 2px;
                height: 20px;
                margin-left: 5px;
              }
            }
            .scroll-right-info{
              height: 132px;

              .info-scroll-ul{
                // height: 132px;
                overflow: hidden;
                .info-detail{
                  color: #888;
                  font-size: 12px;
                  max-width: 195px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  height: 33px;
                  .info-belongs{
                    color: #333;
                  }
                }
                .info-detail:hover{
                  color: #255B8B;
                }

              }
              .anim{
                transition: all 0.5s;
                margin-top: -33px;
              }
            }
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  .market-swiper{

    .el-carousel__indicators{
      bottom: 40px;
      z-index: 3;
      .el-carousel__button{
        height: 4px;
      }
    }
    .el-carousel__arrow--left{
      left: 50%;
      margin-left: -340px;
    }
    .el-carousel__arrow{
      height: 54px;
      width: 54px;
      font-size: 22px;
    }
    .el-carousel__arrow--right{
      right: 50%;
      margin-right: -340px;
    }
    .home-swiper-item{
      background-size: cover;
      background-position: center;
    }
  }
  .swipers1 .el-carousel__indicators, .swipers1 .el-carousel__arrow{
    display: none;
  }
</style>
